<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/3x3-1.css" />
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<style>
			.body {
				width: 5760px;
				height: 3240px;
				display: flex;
				flex-wrap: wrap;
				transform: scale(0.333);
			    transform-origin:0 0;
			    -ms-transform: scale(0.333);         /* IE 9 */
			    -ms-transform-origin:0 0;
			    -webkit-transform: scale(0.333); /* Safari 和 Chrome */
			    -webkit-transform-origin:0 0;
			    -moz-transform: scale(0.333);        /* Firefox */
			    -moz-transform-origin:0 0;
			    -o-transform: scale(0.333);      /* Opera */
			    -o-transform-origin:0 0;
			}
			body{
				width: 1920px;
				height: 1080px;
				background: url(img/bg.png) no-repeat;
			}
		</style>
	</head>

	<body>
        <div class="body">
            <div class="box">
                <div class="bt">一证通办</div>
                <div class="box-bt" style="top: 528px;left: 299px;">平均梳理<br />办事事项</div>
                <div class="box-bt" style="top: 528px;left: 901px;">平均实现<br />“最多跑一次”</div>
                <div class="box-bt" style="top: 528px;left: 1417px;">平均“最多跑一次”实现率</div>
                <div id="ech_n_1" style="height: 100%;width: 100%;"></div>
            </div>
            <div class="box">
                <div class="bt">电子政务外网</div>
                <img src="img/电子政务.png" width="100%" />
            </div>

		<div class="box">
			<div class="bt">智慧消防云平台</div>
			<img src="img/智慧消防云平台.png" width="100%" />
		</div>
            <!--<div class="box" style="background: url(img/tu1.jpg) no-repeat;background-size: 100% 100%;">
            </div>-->
            <div class="box" style="background: url(img/tu2.jpg) no-repeat;background-size: 100% 100%;">
            </div>
            <div class="box" style="padding:0;width:1920px;height:1080px;">
                <iframe  src="http://122.225.56.39:81/wdscreen/#/economic" style="width:100%;height:100%"></iframe>
            </div>
            
		<div class="box">
			<div class="bt">大联动平台</div>
			<img src="img/大联动.png" width="100%" />
		</div>
            <!--<div class="box">
                <div class="bt">雪亮工程</div>
                <div class="shuju" id="shuju">
                </div>
                <div class="jindu">
                    <p>重点公共区域视频监控覆盖率、联网率</p>
                    <p style="top: 90px;">重点行业、领域重要部位视频监控覆盖率</p>
                    <div id="ech_n_2" class="n_1"></div>
                    <div class="num">
                        <a>99.97%</a>
                        <a>99.06%</a>
                    </div>
                </div>
                <img src="img/map5.png" style="position: absolute;left: 680px;" />
                <img src="img/map-dian.png" style="position: absolute;left: 825px;top: 245px;" />
                <div id="ech_n_3" style="position: absolute;right: 100px;width: 400px;height: 100%;"></div>
            </div>-->
            <div class="box">
                <div class="bt">智慧党建</div>
                <div class="box-dj-top">
                    <div style="width: 60%;height: 368px;margin-top: 20px;margin-bottom: 20px;">
                        <div class="box-dj-top-top">
                            <div>
                                <a style="background: #4bbeed;"><img src="img/dj.png" width="60px" /></a>
                                <p>中共委员会<br /><b>15</b>个</p>
                            </div>
                            <div>
                                <a><img src="img/dj.png" width="60px" /></a>
                                <p>党支部<br /><b>15</b>个</p>
                            </div>
                            <div>
                                <a style="background: #4bbeed;"><img src="img/dj.png" width="60px" /></a>
                                <p>党员<br /><b>2544</b>人</p>
                            </div>
                            <div style="font-size: 28px;margin-top:15px;margin-bottom: -15px;width: 350px;text-align: center;">园区党员学历占比</div>
                            <div style="font-size: 28px;margin-top:15px;margin-bottom: -15px;width: 350px;text-align: center;">园区党员学历占比</div>
                        </div>
                        <div id="ech_n_4" style="height: 100%"></div>
                    </div>
                    <div style="width: 40%;height: 368px;margin-top: 20px;position: relative;">
                        <p style="position: absolute;text-align: center;width: 100%;font-size: 30px;top: 20px;">园区党员年龄分布</p>
                        <div id="ech_n_5" style="height: 100%"></div>
                    </div>
                </div>
                <div class="box-dj-bottom">
                    <div style="width: 60%;height: 368px;position: relative;">
                        <p style="position: absolute;text-align: center;width: 100%;font-size: 30px;top: -20px;">党员缴费情况</p>
                        <div id="ech_n_6" style="height: 100%"></div>
                    </div>
                    <div style="width: 40%;height: 368px;position: relative;">
                        <p style="position: absolute;text-align: center;width: 100%;font-size: 30px;top: -20px;">党群活动统计</p>
                        <div id="ech_n_7" style="height: 100%"></div>
                    </div>
                </div>
            </div>
            <div class="box" style="background: url(img/智慧环保.png) no-repeat;background-size: 100% 100%;">
                <!-- <div class="bt">智慧环保</div>
					<div class="box-left-top">
                    <img src="img/zw1.png" />
                    <img src="img/zw2.png" />
                    <img src="img/zw3.png" />
                    <img src="img/zw4.png" />
                    <img src="img/zw5.png" />
                </div>
                <img src="img/line.png" width="100%" style="margin-top: 30px;" />
                <div class="box-left-center">
                    <div>
                        <a style="font-size: 28px;border: 8px solid #00a7f2;color: #00a7f2;"><b>133</b>个</a>
                        <p style="color: #00a7f2;">已部署政务云单位</p>
                    </div>
                    <div>
                        <a style="font-size: 28px;border: 8px solid #e90044;color: #e90044;"><b>55</b>个</a>
                        <p style="color: #e90044;">已部署政务云项目</p>
                    </div>
                    <div>
                        <a style="font-size: 50px;border: 8px solid #aacc06;color: #aacc06;"><b>423</b>个</a>
                        <p style="color: #aacc06;">已部署政务云虚拟机</p>
                    </div>
                </div>
                <img src="img/line.png" width="100%" />
                <div class="box-left-bottom">
                    <div style="border: 4px solid #d9e249;color: #d9e249;">
                        <p>运营维护</p>
                    </div>
                    <div style="border: 4px solid #4bbeed;color: #4bbeed;">
                        <p>业务迁移</p>
                    </div>
                    <div style="border: 4px solid #d9e249;color: #d9e249;">
                        <p>网络接入</p>
                    </div>
                    <div style="border: 4px solid #4bbeed;color: #4bbeed;">
                        <p>数据库服务</p>
                    </div>
                    <div style="border: 4px solid #d9e249;color: #d9e249;">
                        <p>信息安全</p>
                    </div>
                    <div style="border: 4px solid #4bbeed;color: #4bbeed;">
                        <p>灾难备份</p>
                    </div>
                </div> -->
            </div>
            <div class="box">
                <div class="bt">智慧纪检</div>
                <img src="img/纪检.png" width="100%" />
            </div>
        </div>	
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/3x3-1.js"></script>
		<script>
			ech_n_1();
			//ech_n_2();
			ech_n_3();
			ech_n_4();
			ech_n_5();
			ech_n_6();
			ech_n_7();

			function ech_n_5() {
	$.ajax({
		type: 'get',
		url: "new_file.json", //请求数据的地址
		dataType: "json", //返回数据形式为json
		success: function(result) {
			var myChart = echarts.init(document.getElementById("ech_n_5"));
			var data =[10, 52, 200, 334];
			option = {
    color: ['#1469dd'],
    grid:{
    	top:120
    },
    xAxis : [
        {
            type : 'category',
            data : ['20-30', '30-40', '40-50', '50以上'],
					axisTick: {
						show: false
					},axisLine: {
						show: false,
						lineStyle: {
							color: 'white',
						}
					}, 
					axisLabel: {
                        fontSize:24
					},
        }
    ],
    yAxis : {
					type: 'value',
					axisTick: {
						show: false
					},
					axisLine: {
						show: false,
						lineStyle: {
							color: 'white',
						}
					},
					axisLabel: {
                        fontSize:24
					},
					splitLine: {
						show: true,
						lineStyle: {
						    type:'dotted',
							color: '#4abae9',
							width: 2
						}
					},
					splitArea: {
						show: false,
						areaStyle: {
							color: 'rgba(20,57,118,0.5)'
						}
					}
				},
    series : [
        {
            name:'园区党员年龄分布',
            type:'bar',
            barWidth: '20%',
            data:data
        }
    ]
};

			if(option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		},
	});

}
			
			function ech_n_6() {
	$.ajax({
		type: 'get',
		url: "new_file.json", //请求数据的地址
		dataType: "json", //返回数据形式为json
		success: function(result) {
			var myChart = echarts.init(document.getElementById("ech_n_6"));
			var data =[10, 52, 200, 334, 52, 200, 334, 52, 200, 334, 52, 200];
			option = {
    color: ['#d9e249'],
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
					axisTick: {
						show: false
					},axisLine: {
						show: false,
						lineStyle: {
							color: 'white',
						}
					}, 
					axisLabel: {
                        fontSize:24
					},
        }
    ],
    yAxis : {
					type: 'value',
					axisTick: {
						show: false
					},
					axisLine: {
						show: false,
						lineStyle: {
							color: 'white',
						}
					},
					axisLabel: {
                        fontSize:24
					},
					splitLine: {
						show: true,
						lineStyle: {
						    type:'dotted',
							color: '#4abae9',
							width: 2
						}
					},
					splitArea: {
						show: false,
						areaStyle: {
							color: 'rgba(20,57,118,0.5)'
						}
					}
				},
    series : [
        {
            type:'line',
            barWidth: '40%',
            showSymbol:false,
            lineStyle: {
							width: 4
						},
            data:data
        }
    ]
};

			if(option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		},
	});

}
			
			function ech_n_7() {
	$.ajax({
		type: 'get',
		url: "new_file.json", //请求数据的地址
		dataType: "json", //返回数据形式为json
		success: function(result) {
			var myChart = echarts.init(document.getElementById("ech_n_7"));
			var data =[10, 52, 200, 334, 52, 200, 334, 52, 200, 334, 52, 200];
			option = {
    color: ['#1469dd'],
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
					axisTick: {
						show: false
					},axisLine: {
						show: false,
						lineStyle: {
							color: 'white',
						}
					}, 
					axisLabel: {
                        fontSize:24
					},
        }
    ],
    yAxis : {
					type: 'value',
					axisTick: {
						show: false
					},
					axisLine: {
						show: false,
						lineStyle: {
							color: 'white',
						}
					},
					axisLabel: {
                        fontSize:24
					},
					splitLine: {
						show: true,
						lineStyle: {
						    type:'dotted',
							color: '#4abae9',
							width: 2
						}
					},
					splitArea: {
						show: false,
						areaStyle: {
							color: 'rgba(20,57,118,0.5)'
						}
					}
				},
    series : [
        {
            type:'bar',
            barWidth: '40%',
            data:data
        }
    ]
};

			if(option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		},
	});

}
			$(document).ready(function() {
				$.get('ajax.json',
					function(result) {
						if(result) {
							var data = result.Data;
							var btn = data.totalHuru;
							var html = '';
							html += '<div class="p1">封锁“圈”<p>' + data.quan + '</p></div><div class="p2">管控“块”<p>' + data.kuai + '</p></div><div class="p3">单元“格”<p>' + data.ge + '</p></div><div class="p4">轨迹“线”<p>' + data.xian + '</p></div><div class="p5">关键“点”<p>' + data.dian + '</p></div>';

							$(html).appendTo('#shuju');
						}
					});
			})
		</script>
	</body>

</html>